<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" href="./prism.css">
		<script src="./prism.js"></script>
	</head>
	<body>
		<!-- 
		 tinymce中文文档
		 http://tinymce.ax-z.cn/
		 
		 一，使用方式
		 cnpm i @tinymce/tinymce-vue
		 
		 impor Editor  from '@tinymce/tinymce-vue'
		 
		 <Editor :init="{width:'500px',
		 		language:'zh_CN', //调用放在langs文件夹内的语言包}"></Editor>
		 
		 tinymce
		 
			
		 import tinymce from 'tinymce'
		 <div id="tiny"></div>
		 mounted() {
		 	tinymce.init({
		 		selector:'#tiny',
		 		width:'500px',
		 		language:'zh_CN', //调用放在langs文件夹内的语言包
		 	})
		 }
		 
		 
		 二，获取输入的内容
		 获取内容  
		 tinymce.activeEditor.getContent()
		 //参数  
		 {
			 format:html   //tree raw text  html
		 }
		 获取选中的内容
		  tinymce.activeEditor.selection.getContent('替换选中的内容')
		 
		 设置内容
		 
		 tinymce.activeEditor.setContent('<p style="background-color: pink;color: green;">asdasdasd</p>');
		 
		 三 插件使用
		 插件 
		 plugins: 'image',  引用插件
		 toolbar: 'link image', //加入插件
		 
		 自定义插件   ---选中的文本 变色
		 setup(editor){
		 	editor.ui.registry.addButton('hnc',{
		 		icon:'home',
		 		tooltip:'文字提示',
		 		onAction() {
		 			let text = editor.selection.getContent()
		 			editor.selection.setContent(`<span style="background-color: pink;color: aqua;">${text}</span>`)
		 			console.log('action',text);
		 		}
		 	})
		 },
		 content_css:'/mycontent.css'   //行内样式太多 可以配置 内容区域的样式 通过添加类名来增加样式
		 //    /为 public 目录
		 
		 四，代码块设置
		 
		 tinymce.init({
		     selector: '#tinydemo',
		     plugins: "codesample",
		     toolbar: "codesample",
		 });
		 
		 在非编辑器环境展示代码示例，需要自行在当前页面引入prism.js和prism.css两个文件，
		 这两个文件可到prism官网（https://prismjs.com/）下载，官网还很贴心地提供了配色方案DIY功能。
		 
		 -->
		 <script>
			 
			 let st =  '<p>dadasdasd<strong>asdadasdasd</strong></p>\n<p><strong>adasdas<em>dasd</em></strong></p>\n<pre class="language-javascript"><code>function setup(editor){\n\t\t\t\teditor.ui.registry.addButton(\'hnc\',{\n\t\t\t\t\ticon:\'home\',\n\t\t\t\t\ttooltip:\'文字提示\',\n\t\t\t\t\tonAction() {\n\t\t\t\t\t\tlet text = editor.selection.getContent()\n\t\t\t\t\t\teditor.selection.setContent(`&lt;span style="background-color: pink;color: aqua;"&gt;${text}&lt;/span&gt;`)\n\t\t\t\t\t\tconsole.log(\'action\',text);\n\t\t\t\t\t}\n\t\t\t\t})\n\t\t\t}</code></pre>\n<p>about-pageaAD&nbsp;</p>\n<pre class="language-markup"><code>&lt;p&gt;ddddddddd&lt;/p&gt;</code></pre>'
			document.body.innerHTML = st
		 </script>
	</body>
</html>